<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color switcher!</title>
  </head>
  <body>
    <div class="container">
      <h1 class="ttile">Lighten / Darken color!</h1>
      <label for="hex">Color (Hex): </label>
      <input type="text" name="hex" id="hexInput" placeholder="#000000" />

      <div class="toggle">
        <p id="lightenText" class="toggleText">Lighten</p>
        <div id="toggleBtn" class="toggle-btn">
          <div id="innerCirlce" class="inner-circle"></div>
        </div>
        <p id="darkenText" class="toggleText">Darken</p>
      </div>

      <label for="slider" id="sliderText">0%</label>
      <input
        type="range"
        min="0"
        max="100"
        value="0"
        name="slider"
        id="sliderEl"
        class="sliderEl"
      />
      <p>Input color:</p>
      <div id="inputColor" class="box"></div>
      <p id="alteredColorText">Altered color:</p>
      <div id="alteredColor" class="box"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
